<!--
 * @Author: 胡海
 * @Date: 2020-11-21 00:18:47
 * @LastEditors: 胡海
 * @LastEditTime: 2020-11-21 00:35:33
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <style>
        .red {
            background: red;
        }
        #app div {
            display: none;
        }
    </style>
    <script src="../vue/src/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <p>{{message.split('').reverse().join('')}}</p>
        <p>{{message.split('').reverse().join('')}}</p>

        <p>{{list.map(item => item*2).filter(item => item < 10)}}</p>
    </div>
    <script>

        /*
            计算属性
                作用：把对处理数据的逻辑抽离在计算属性中，使得模板更加轻量易读

                定义计算属性
                    computed : {

                    }
        */

        let vm = new Vue({
            el: '#app',
            data:{
                message: 'miaovketang',
                list: [1,2,3,4,5]
            },
            computed : {
                reverserMessage(){
                    return 1
                }
            }
        })
        //console.log(vm);


    </script>
</body>
</html>